<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="interval" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
		<view class="user_info">
			<image @click="onTokenJump('/pagesMy/my/editInfo')" :src="userInfo.headImg || 'http://qn.kemean.cn/upload/202007/08/default_head_img.png'"
			 mode="aspectFill"></image>
			<view class="user_basicinfo" @click="onTokenJump('/pagesMy/my/editInfo')">
				<text>{{ userInfo.nickName || '点击登录' }}</text>
				<view v-if="userInfo.nickName">积分：{{ userInfo.integralCount || 0 }}</view>
			</view>
			<image class="user_set" @click="onPageJump('/pagesMy/my/setUp')" src="../../static/icon/ic_set.png" mode="aspectFit"></image>
		</view>
		<view class="balance_card_box">
			<view class="balance_box">
				<view class="balance_price_info" @click="onTokenJump('/pagesMy/my/wallet/wallet')">
					<view>
						￥
						<text>{{ balanceInfo.balance || '0.00' }}</text>
					</view>
					<text>我的余额</text>
				</view>
				<button @click="onTokenJump('/pagesMy/my/wallet/drawing')">去提现</button>
			</view>
		</view>
		<view class="balance_card_arc"></view>
		<view class="user_order">
			<view class="user_order_text">
				<view>我的订单</view>
				<text @click="onTokenJump('/pages/my/order/orderList')">查看全部订单 ></text>
			</view>
			<view class="user_order_content">
				<view @click="onTokenJump('/pages/my/order/orderList?type=1001')">
					<image src="../../static/icon/theme/ic_order_payment.png" mode="aspectFit"></image>
					<text>待付款</text>
					<view class="badge" v-if="userInfo.waitPayCount > 0">{{ userInfo.waitPayCount }}</view>
				</view>
				<view @click="onTokenJump('/pages/my/order/orderList?type=1201')">
					<image src="../../static/icon/theme/ic_order_delivery.png" mode="aspectFit"></image>
					<text>待发货</text>
					<view class="badge" v-if="userInfo.waitSendCount > 0">{{ userInfo.waitSendCount }}</view>
				</view>
				<view @click="onTokenJump('/pages/my/order/orderList?type=1301')">
					<image src="../../static/icon/theme/ic_order_finished.png" mode="aspectFit"></image>
					<text>待收货</text>
					<view class="badge" v-if="userInfo.waitReceiveCount > 0">{{ userInfo.waitReceiveCount }}</view>
				</view>
				<view @click="onTokenJump('/pages/my/order/orderList?type=1401')">
					<image src="../../static/icon/theme/ic_order_rate.png" mode="aspectFit"></image>
					<text>评价</text>
					<view class="badge" v-if="userInfo.waitEvaluateCount > 0">{{ userInfo.waitEvaluateCount }}</view>
				</view>
				<view v-if="module.afterSale" @click="onTokenJump('/pages/my/order/orderList?type=1500')">
					<image src="../../static/icon/theme/ic_order_refund.png" mode="aspectFit"></image>
					<text>售后</text>
				</view>
			</view>
		</view>
		<view class="user_myservice">
			<text>我的服务</text>
			<view class="user_myservice_content">
				<view @click="onTokenJump('/pages/integral/integralMall')">
					<image src="../../static/icon/theme/ic_my_integral.png" mode="aspectFit"></image>
					<text>积分商城</text>
				</view>
				<view @click="onTokenJump('/pagesMy/my/distribution/extendCenter')">
					<image src="../../static/icon/theme/ic_my_promotion.png" mode="aspectFit"></image>
					<text>推广中心</text>
				</view>
				<view v-if="module.agentSettle" @click="onIdentity(3000)">
					<image src="../../static/icon/theme/ic_my_agent.png" mode="aspectFit"></image>
					<text>代理商申请</text>
				</view>
				<view v-if="module.shareholderSettle" @click="onIdentity(2000)">
					<image src="../../static/icon/theme/ic_my_shareholder.png" mode="aspectFit"></image>
					<text>股东申请</text>
				</view>
                <view v-if="module.shop" @click="onTokenJump('/pages/mall/entering')">
                	<image src="../../static/icon/theme/ic_my_business.png" mode="aspectFit"></image>
                	<text>商家入驻</text>
                </view>
				<view @click="onTokenJump('/pages/my/coupon')">
					<image src="../../static/icon/theme/ic_my_coupon.png" mode="aspectFit"></image>
					<text>优惠券</text>
				</view>
				<view @click="onTokenJump('/pages/my/address/addressList')">
					<image src="../../static/icon/theme/ic_my_address.png" mode="aspectFit"></image>
					<text>收货地址</text>
				</view>
				<view @click="onTokenJump('/pagesMy/my/collect')">
					<image src="../../static/icon/theme/ic_my_collect.png" mode="aspectFit"></image>
					<text>我的收藏</text>
				</view>

				<view @click="onTokenJump('/pagesMy/my/feedback')">
					<image src="../../static/icon/theme/ic_my_feedback.png" mode="aspectFit"></image>
					<text>意见反馈</text>
				</view>
				<view @click="showPopup = true">
					<image src="../../static/icon/theme/ic_my_j.png" mode="aspectFit"></image>
					<text>关注公众号</text>
				</view>
				<view @click="onTokenJump('/pagesMy/my/about')">
					<image src="../../static/icon/theme/ic_my_about.png" mode="aspectFit"></image>
					<text>关于我们</text>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="share">
					<image src="../../static/icon/theme/ic_my_share.png" mode="aspectFit"></image>
					<text>分享平台</text>
				</button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view @click="onShare">
					<image src="../../static/icon/theme/ic_my_share.png" mode="aspectFit"></image>
					<text>分享平台</text>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<attention-public v-model="showPopup" :showBtn="false"></attention-public>
	</view>
</template>

<script>
	import attentionPublic from '@/components/module/attention_public';

	import {
		mapState,
		mapMutations
	} from 'vuex';
	// #ifdef APP-PLUS
	import {appShare} from '@/config/utils';
	// #endif
	export default {
		components: {
			attentionPublic
		},
		data() {
			return {
				statusBarHeight: 0,
				showPopup: false,
				shareInfo: {},
				balanceInfo: {},
				module: {}
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		//第一次加载
		onLoad(e) {
			this.module = this.$base.module;
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			this.getConfInfo();
		},
		//页面显示
		onShow() {
			this.judgeLogin(() => {
				this.pageData();
				this.getSettleTatus();
			});
		},
		//方法
		methods: {
			...mapMutations(['setUserInfo']),
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			onTokenJump(url) {
				this.judgeLogin(() => {
					uni.navigateTo({
						url: url
					});
				});
			},
			onShare() {
				// #ifdef APP-PLUS
				appShare(this.shareInfo);
				// #endif
			},
			getConfInfo() {
				this.$http
					.get('api/open/v1/conf', {
						needLogin: false
					})
					.then(res => {
						this.shareInfo = res.share;
					});
			},
			pageData() {
				this.$http.get('api/mime/v1/info').then(res => {
					this.setUserInfo(res);
				});
				this.$http.get('api/mime/wallet/v1/info').then(res => {
					this.balanceInfo = res;
				});
			},
			getSettleTatus() {
				this.$http
					.get('api/recommend/v1/settle_tatus')
					.then(res => {
						this.settleTatus = res;
					});
			},
			onIdentity(type) {
				this.judgeLogin(() => {
					let url = "";
					if (type == 2000) {
						if ([1000, 1101].includes(this.settleTatus.distribution)) {
							url = "/pagesMy/my/character/partnerEntering";
						} else if ([1201, 1301].includes(this.settleTatus.distribution)) {
							url = "/pagesMy/my/character/partnerEntering?state=" + this.settleTatus.distribution;
						} else {
							url = "/pagesMy/my/distribution/extendCenter";
						}
					} else if (type == 3000) {
						if ([1000, 1101].includes(this.settleTatus.proxy)) {
							url = "/pagesMy/my/character/operationEntering";
						} else if ([1201, 1301].includes(this.settleTatus.proxy)) {
							url = "/pagesMy/my/character/operationEntering?state=" + this.settleTatus.proxy;
						} else {
							url = "/pagesMy/my/distribution/extendCenter";
						}
					}
					uni.navigateTo({
						url: url
					})
				});
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	page {
		background: #f7f7f7;
	}

	.mp_img {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 80%;
		}
	}

	.interval {
		background-color: #fff;
	}

	.user_info {
		background: #ffffff;
		padding: 60rpx 40rpx 15rpx 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		>image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		.user_basicinfo {
			width: calc(100% - 160rpx);
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			padding: 15rpx 30rpx;
			flex: 1;

			>text {
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 20rpx;
			}

			>view {
				// margin-right: 270rpx;
				padding: 9rpx 20rpx;
				font-size: 24rpx;
				color: $themeColor;
				background-color: $viceColor;
				border-radius: 21rpx;
			}
		}

		.user_set {
			width: 44rpx;
			height: 42rpx;
		}
	}

	.balance_card_box {
		background: #ffffff;
		padding: 0rpx 30rpx 0rpx 30rpx;

		.balance_box {
			padding: 0rpx 60rpx 0rpx 80rpx;
			height: 140rpx;
			background-image: url('../../static/icon/theme/img_svip.png');
			background-size: 100% 100%;
			background-position: center top;
			background-repeat: no-repeat;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;

			.balance_price_info {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
				color: #9a5500;

				>view {
					font-size: 24rpx;

					>text {
						font-size: 36rpx;
					}
				}

				>text {
					font-size: 24rpx;
				}
			}

			>button {
				width: 120rpx;
				height: 40rpx;
				border-radius: 20rpx;
				background: #bb852e;
				font-size: 24rpx;
				line-height: 40rpx;
				color: #efefef;
			}
		}
	}

	.balance_card_arc {
		box-sizing: content-box;
		position: absolute;
		background-image: url('../../static/icon/theme/img_svip_circle.png');
		background-size: 100% auto;
		background-position: center bottom;
		background-repeat: no-repeat;
		width: 100%;
		height: 64rpx;
		margin-top: -26rpx;
		z-index: 3;
	}

	.user_order {
		background: #ffffff;
		margin: 20rpx;
		padding: 30rpx 0rpx 40rpx 0rpx;
		display: flex;
		flex-direction: column;
		border-radius: 8rpx;
		overflow: hidden;

		.user_order_text {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;

			>view {
				font-size: 32rpx;
				color: #333333;
				font-weight: bold;
			}

			>text {
				font-size: 24rpx;
				color: #999999;
			}
		}

		.user_order_content {
			display: flex;
			justify-content: space-around;
			align-items: center;

			>view {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				position: relative;

				>image {
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 20rpx;
				}

				.badge {
					position: absolute;
					top: -16rpx;
					right: 0;
					background-color: #f56c6c;
					border-radius: 20rpx;
					color: #fff;
					display: inline-block;
					font-size: 24rpx;
					height: 32rpx;
					line-height: 28rpx;
					padding: 0 8rpx;
					text-align: center;
					white-space: nowrap;
					border: 2rpx solid #fff;
					transform: translateX(50%);
				}
			}
		}
	}

	.user_myservice {
		background: #ffffff;
		margin: 0rpx 20rpx;
		padding: 30rpx 0rpx;
		display: flex;
		flex-direction: column;
		border-radius: 8rpx;
		overflow: hidden;

		>text {
			padding: 0rpx 30rpx;
			font-size: 32rpx;
			color: #333333;
			padding-bottom: 20rpx;
			font-weight: bold;
		}

		.user_myservice_content {
			display: flex;
			flex-wrap: wrap;

			>view,
			>button {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #333333;
				font-size: 24rpx;
				width: 25%;
				padding: 20rpx 0rpx;
                line-height: inherit;
				image {
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}
</style>
